<template>
  <section class="firm-manage" v-cloak>
    <form @keyup.enter="search" @submit.prevent>
      <el-row class="search-box sc-search-box">
        <el-col :span="24">
          <label for="" class="choose">
            <span>设备号：</span>
            <el-input size="small" class="width200" placeholder="请输入设备号" v-model.trim="form.sn" :maxlength="50"></el-input>
          </label>
          <label for="" class="choose">
            <span>Mac：</span>
            <el-input size="small" class="width200" placeholder="请输入Mac" v-model.trim="form.sim" :maxlength="50"></el-input>
          </label>
          <label for="" class="choose">
            <span>设备型号：</span>
            <el-select v-model="form.class_id" size="small" class="width200" placeholder="请选择设备型号">
              <el-option
                v-for="item in classlist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </label>
          <label for="" class="choose">
            <span>关联接口：</span>
            <el-select v-model="form.interface_id" size="small" class="width200" placeholder="请选择关联接口">
            </el-select>
          </label>
          <label for="" class="choose">
            <span>设备状态：</span>
            <el-select v-model="form.status" size="small" class="width200" placeholder="请选择设备状态">
              <el-option label="在线" :value="1"></el-option>
              <el-option label="离线" :value="2"></el-option>
            </el-select>
          </label>
          <label for="" class="choose">
            <el-button icon="search" type="primary" size="small" @click="search" v-resetClick>搜索</el-button>
          </label>
        </el-col>
      </el-row>
    </form>
    <div class="title"></div>
    <el-row class="data-list">
      <el-table :data="lists" border class="table_box" style="width:100%" :empty-text="emptyText">
        <el-table-column prop="sn" label="设备号" align="center"></el-table-column>
        <el-table-column prop="imei" label="Mac" align="center"></el-table-column>
        <!-- <el-table-column prop="shopName" label="sim号" align="center">
          <template slot-scope="scope">
            <div style="color: #0000FF; cursor:pointer;" @click="checkTraffic(scope.row)">{{scope.row.sim}}</div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="sim_end_date" label="流量到期时间" align="center"></el-table-column> -->
        <el-table-column prop="class_name" label="设备型号" align="center"></el-table-column>
        <el-table-column prop="interface_name" label="关联接口" align="center"></el-table-column>
        <el-table-column prop="shopName" label="设备状态" align="center">
          <template slot-scope="scope">
            <div style="color: #00CC00" v-if="scope.row.status === 1">在线</div>
            <div v-if="scope.row.status === 2">离线</div>
          </template>
        </el-table-column>
        <el-table-column prop="shopName" label="电量" align="center">
          <template slot-scope="scope">
            <div style="color: #00CC00" v-if="scope.row.electric_quantity >= 80">{{scope.row.electric_quantity}}%</div>
            <div v-else-if="scope.row.electric_quantity < 80 && scope.row.electric_quantity > 30">{{scope.row.electric_quantity}}%</div>
            <div style="color: #FF0000" v-else>{{scope.row.electric_quantity}}%</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="shopName" label="功耗" align="center">
          <template slot-scope="scope">
            <div style="color: #00CC00" v-if="scope.row.power_waste === 2">低功耗</div>
            <div v-if="scope.row.power_waste === 1">正常</div>
          </template>
        </el-table-column>
        <el-table-column prop="shopName" label="功能模式" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.type === 1">先测温后扫码</div>
            <div v-if="scope.row.type === 2">先扫码后测温</div>
            <div v-if="scope.row.type === 3">只扫码</div>
          </template>
        </el-table-column> -->
        <el-table-column prop="version" label="版本号" align="center"></el-table-column>
        <el-table-column prop="is_auth" label="是否授权" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.is_auth === 2">否</div>
            <div v-if="scope.row.is_auth === 1">是</div>
          </template>
        </el-table-column>
        <el-table-column prop="auth_time" label="授权时间" align="center"></el-table-column>
        <!-- <el-table-column prop="created" label="创建时间" align="center"></el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
              <el-button type="text" @click="editFirm(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paginate :callback="pageObj.callback" :page="pageObj.page"></paginate>
    </el-row>
    <el-dialog title="流量查询" :visible.sync="isDialogShow" :show-close="false" :destroy-on-close="true" :close-on-click-modal="false" width="40%" custom-class="customWidth">
      <el-form>
        <el-form-item label="sim号:" :label-width="formLabelWidth">
          <span>{{flowgetDate.sim}}</span>
        </el-form-item>
        <el-form-item label="总流量:" :label-width="formLabelWidth">
          <span>{{flowgetDate.totalAmount}} KB</span>
        </el-form-item>
        <el-form-item label="已用流量:" :label-width="formLabelWidth">
          <span>{{flowgetDate.useAmount}} KB</span>
        </el-form-item>
        <el-form-item label="剩余流量:" :label-width="formLabelWidth">
          <span>{{flowgetDate.remainAmount}} KB</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isDialogShow = false">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看信息" :visible.sync="isView" :show-close="false" :destroy-on-close="true" :close-on-click-modal="false" width="40%" custom-class="customWidth">
      <el-form>
        <el-form-item label="sim号:" :label-width="formLabelWidth">
          <span style="color: #0000FF; cursor:pointer;" @click="checkTraffic(queryData)">{{queryData.sim}}</span>
        </el-form-item>
        <el-form-item label="功耗:" :label-width="formLabelWidth">
          <span style="color: #00CC00" v-if="queryData.power_waste === 2">低功耗</span>
          <span v-if="queryData.power_waste === 1">正常</span>
        </el-form-item>
        <el-form-item label="功能模式:" :label-width="formLabelWidth">
          <span v-if="queryData.type === 1">先测温后扫码</span>
          <span v-if="queryData.type === 2">先扫码后测温</span>
          <span v-if="queryData.type === 3">只扫码</span>
        </el-form-item>
        <el-form-item label="创建时间:" :label-width="formLabelWidth">
          <span>{{queryData.created}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isView = false">关 闭</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { devicelist, deviceclasslist, simflowget } from 'api/txEquipment/index'
import ctable from 'components/common/ctable'
import paginate from 'components/common/paginate'
export default {
  data () {
    return {
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      formLabelWidth: '120px',
      isDialogShow: false,
      shopName: '', // 厂商名称
      lists: [], // 数据列表,
      form: {
        sn: '',
        sim: '',
        interface_id: '',
        status: '',
        class_id: ''
      },
      formObj: {},
      classlist: [],
      flowgetDate: {},
      queryData: {},
      isView: false
    }
  },
  created () {
    this.filterObjEvemt()
    deviceclasslist({pageSize: 1000, pageIndex: 0}).then(res => {
      this.classlist = res.data
    })
  },
  components: {
    ctable,
    paginate
  },
  methods: {
    editFirm (item) {
      this.queryData = item
      this.isView = true
    },
    checkTraffic (item) {
      simflowget({sim: item.sim}).then(res => {
        if (res.data.code) return this.$message.error(res.data.message)
        this.flowgetDate = res.data.data
        this.flowgetDate.sim = item.sim
        this.isDialogShow = true
      })
    },
    getData (int) { // 获取数据
      devicelist({
        pageIndex: int - 1,
        pageSize: 10,
        ...this.formObj
      }).then(res => {
        this.lists = res.data
        this.pageObj.page = res.page
      })
    },
    search () {
      this.filterObjEvemt()
    },
    filterObjEvemt () {
      let obj = {}
      for (const key in this.form) {
        if (this.form[key] === '' || this.form[key] === null || this.form[key] === undefined) continue
        switch (key) {
          case 'aaaa8888':
            obj[key] = this.form[key]
            break
          default:
            obj[key] = this.form[key]
            break
        }
      }
      this.formObj = JSON.parse(JSON.stringify(obj))
      this.getData(1)
      return obj
    }
  }
}
</script>
<style lang="less" scoped>
.firm-manage {
  /deep/ .customWidth{
    min-width: 560px;
  }  .width200{width: 200px;}
  .title {
    overflow: hidden;
    padding: 16px 30px;
    padding-bottom: 0;
  }
  .search-box {
    padding: 20px 30px;
    background: #ffffff;
  }
  .data-list {
    padding: 10px 30px;
  }
  .choose {
    margin-right: 10px;
    .select-box {
      width: 120px;
    }
    .year-box {
      width: 150px;
    }
  }
  .titleright{
    float: right;
    margin-left: 20px;
  }
}
</style>
